<!--  -->
<template>
  <div class="finance">
    <div class="money-bank">
      <a-card class="money-card">
        <div>
          <h2 class="card-title">商户账户中心（{{ merchantAccount.merchantNo }}）</h2>
          <div class="money-infos">
            <div class="money-item">
              <span class="money-type">资产（可提现）</span>
              <span class="money-val">{{
                merchantAccount.balance ? formatMoney({ money: merchantAccount.balance, isShowFree: false }) : '0.00'
              }}</span>
            </div>
            <div class="money-item">
              <span class="money-type">付款预估收益</span>
              <span class="money-val">{{
                merchantAccount.income ? formatMoney({ money: merchantAccount.income, isShowFree: false }) : '0.00'
              }}</span>
            </div>
          </div>
        </div>
      </a-card>
      <a-card class="bank-card">
        <div>
          <div class="bank-card-header">
            <h1 class="card-title">结算账号信息</h1>
            <span v-if="merchantAccount.settleAccountInfo && merchantAccount.settleAccountInfo.authStatus"
              class="status-color">已绑定</span>
            <span v-else class="status-color" @click="toOpenPay">去开通</span>
          </div>
          <a-descriptions v-if="merchantAccount.settleAccountInfo && merchantAccount.settleAccountInfo.authStatus"
            :column="1" :bordered="false">
            <a-descriptions-item label="账户名"> {{ merchantAccount.settleAccountInfo.orgName }} </a-descriptions-item>
            <a-descriptions-item label="账号"> {{ merchantAccount.settleAccountInfo.bankCardNo }} </a-descriptions-item>
            <a-descriptions-item label="开户行"> {{ merchantAccount.settleAccountInfo.bankName }} </a-descriptions-item>
          </a-descriptions>
          <div v-else class="disFlx flexCenter">暂未开通</div>
        </div>
      </a-card>
    </div>
    <a-card>
      <a-tabs v-model="key">
        <a-tab-pane key="AccountCollect" tab="人脉解锁订单">
          <AccountCollect v-if="key == 'AccountCollect'"></AccountCollect>
        </a-tab-pane>
        <a-tab-pane key="ActivityTiketAccountCollect" tab="活动报名订单" force-render>
          <ActivityTiketAccountCollect v-if="key == 'ActivityTiketAccountCollect'"></ActivityTiketAccountCollect>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script>
import AccountCollect from './accountCollect/index.vue'
import Resources from './resources/index.vue'
import { getMerchantAccount } from '@/api/finance/finance'
import { Modal } from 'ant-design-vue'
import { formatMoney } from '@/utils/number'
import ActivityTiketAccountCollect from './activityTiketAccountCollect/index.vue'
export default {
  components: {
    AccountCollect,
    Resources,
    ActivityTiketAccountCollect
  },
  data() {
    return {
      mode: 'accountCollect',
      key: 'AccountCollect',
      merchantAccount: {}
    }
  },
  mounted() {
    this.queryMerchantAccount()
  },
  methods: {
    formatMoney,
    async queryMerchantAccount() {
      const { data } = await getMerchantAccount()
      this.merchantAccount = data
      // if (data.settleAccountInfo && data.settleAccountInfo.authStatus) return
      // Modal.confirm({
      //   title: '提示',
      //   content: '当前机构暂未开通该功能模块，请联系服务商开通！',
      //   cancelText: '暂不开通',
      //   okText: '去开通',
      //   onCancel: () => { },
      //   onOk: () => {
      //     this.$router.replace({
      //       path: '/system/openOnlinePayment'
      //     })
      //   }
      // })
    },
    toOpenPay() {
      this.$router.push({
        path: '/system/paySettings',
        query: {
          titleKey: 'onlinePayment'
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.finance {
  display: flex;
  flex-direction: column;
  gap: 24px;

  .card-title {
    color: rgba(16, 16, 16, 1);
    font-size: 16px;
    font-weight: 500;
  }

  .money-bank {
    display: flex;
    white-space: nowrap;
    gap: 24px;

    .money-card {
      flex: 1;
      border-radius: 8px;
      padding-left: 21px;

      .money-infos {
        display: flex;
        gap: 118px;
        padding-left: 71px;
        margin-top: 31px;

        .money-item {
          display: flex;
          flex-direction: column;
          gap: 16px;
          justify-content: center;

          .money-type {
            color: rgba(131, 131, 131, 1);
            font-size: 14px;
            font-weight: 500;
          }

          .money-val {
            color: rgba(81, 81, 81, 1);
            font-size: 20px;
            font-weight: 500;
          }
        }
      }
    }

    .bank-card {
      white-space: nowrap;
      flex: 1;
      border-radius: 8px;
      padding-left: 35px;

      ::v-deep .ant-descriptions-item {
        padding-bottom: 5px;
      }

      .bank-card-header {
        display: flex;
        justify-content: space-between;
        height: 24px;
        margin-bottom: 26px;
        align-items: center;

        .status-color {
          color: rgba(72, 137, 248, 1);
          font-size: 16px;
        }
      }
    }
  }
}
</style>
